<script lang="ts" setup>
import {ref, watch} from "vue"
import {forgt, getC, getUserInfo, login, regrpt} from "../serve"
import {ElMessage} from "element-plus"
import {useRouter} from 'vue-router'

const
    router = useRouter(),
    inf = ref(0),
    fr = ref(),
    loadg = ref(false),
    loginF = ref({username: '', password: ''}),
    loginR = {
      username: [
        {
          required: true,
          min: 5,
          max: 10,
          message: '账号长度5-10位',
          trigger: 'trigger',
        },
      ],
      password: [
        {
          required: true,
          min: 5,
          max: 15,
          message: '密码长度5-15位',
          trigger: 'trigger',
        },
      ]
    },
    regrF = ref({nickname: '', username: '', password: '', confirmPassword: '', email: ''}),
    regrR = {
      username: [
        {
          required: true,
          min: 5,
          max: 10,
          message: '账号长度5-10位',
          trigger: 'trigger',
        },
      ],
      password: [
        {
          required: true,
          min: 5,
          max: 15,
          message: '密码长度5-15位',
          trigger: 'trigger',
        },
      ],
      confirmPassword: [
        {
          required: true,
          min: 5,
          max: 15,
          message: '密码长度5-15位',
          trigger: 'trigger',
        },
      ],
      nickname: [
        {
          required: true,
          min: 1,
          max: 20,
          message: '姓名长度1-20位',
          trigger: 'trigger',
        },
      ],
      email: [
        {
          required: true,
          min: 5,
          max: 30,
          message: '邮箱长度5-30位',
          trigger: 'trigger',
        },
      ]
    },
    fgtF = ref({username: '', password: '', confirmPassword: '', code: ''}),
    fgtR = {
      username: [
        {
          required: true,
          min: 5,
          max: 10,
          message: '账号长度5-10位',
          trigger: 'trigger',
        },
      ],
      password: [
        {
          required: true,
          min: 5,
          max: 15,
          message: '密码长度5-15位',
          trigger: 'trigger',
        },
      ],
      confirmPassword: [
        {
          required: true,
          min: 5,
          max: 15,
          message: '密码长度5-15位',
          trigger: 'trigger',
        },
      ],
      code: [
        {
          required: true,
          min: 4,
          max: 10,
          message: '验证码长度4-10位',
          trigger: 'trigger',
        }
      ]
    },
    inva = ref(false),
    vaCount = ref(60)
;

function getVa() {
  // inva.value = true
  loadg.value = true
  getC({...fgtF.value}).then(() => {
    inva.value = true
    ElMessage({type: 'success', message: '验证码发送成功！', duration: 1500})
    loadg.value = false
    const inter = setInterval(() => {
      if (vaCount.value == 1) {
        vaCount.value = 60
        clearInterval(inter)
        return
      }
      if (0 < vaCount.value) {
        vaCount.value--
      }
    }, 1000)
  }).catch(() => loadg.value = false)
}

async function submit() {
  try {
    if (inf.value == 0) {
      await fr.value.validate()
      login({...loginF.value}).then((r: any) => {
        ElMessage({type: 'success', message: '登录成功！', duration: 1500})
        sessionStorage.setItem('token', r['token'])
        sessionStorage.setItem('tokenInfo', JSON.stringify({
          token: r['token'],
          userId: r['userId'],
          userName: loginF.value.username
        }))
        getUserInfo().then(r => {
          sessionStorage.setItem('userInfoSy', JSON.stringify(r))
          router.push('/').catch(() => true)
        })
      })
    } else if (inf.value == -1) {
      await fr.value.validate()
      regrpt({...regrF.value}).then(() => {
        ElMessage({type: 'success', message: '注册成功,您的账号可以登录啦！', duration: 1500})
        chy(false, true)
      })
    } else {
      await fr.value.validate()
      if (!inva.value) {
        ElMessage({type: 'error', message: '请先获取验证码！', duration: 1500})
        return
      }
      forgt({...fgtF.value}).then(() => {
        ElMessage({type: 'success', message: '密码找回成功,您的账号可以登录啦！', duration: 1500})
        chy(false, true)
      })
    }
  } catch (e) {
  }
}

function chy(i: boolean, y: boolean = false) {
  let f
  f = i ? (inf.value == 0 || inf.value == 1 ? -1 : 0) : (inf.value == -1 || inf.value == 0 ? 1 : 0)
  loadg.value = true
  if (y) {
    f = 0
  }
  setTimeout(() => {
    inf.value = f
    loadg.value = false
  }, 1000)
}

watch(() => [loginF.value, regrF.value, fgtF.value], async () => {
  try {
    await fr.value.validate()
  } catch (e) {
  }
}, {deep: true})
</script>

<template>
  <div container>
    <img alt="" left-bg src="/login-bg.svg"/>
    <el-scrollbar right>
      <div v-loading="loadg" d-f element-loading-text="加载中...">
        <div tp>
          <img alt="" src="/icon.svg"/>
          <div style="font-size: 20px;margin: 10px 0;">春屿的花店</div>
          <div style="color: #666666;font-size: 12px;">{{
              inf == 0 ? '欢迎登录' : (inf == 1 ? '找回密码' : '欢迎注册')
            }}
          </div>
        </div>
        <el-form ref="fr" :model="inf == 0 ? loginF: (inf == -1 ? regrF:fgtF)"
                 :rules="inf == 0 ? loginR:(inf == -1 ? regrR:fgtR)" d-fr>
          <div v-show="inf == 0" login>
            <el-form-item prop="username">
              <div r>账号</div>
              <el-input v-model="loginF.username" clearable placeholder="请输入您的账号"
                        style="height: 50px;margin-top: 5px;"/>
            </el-form-item>
            <el-form-item prop="password">
              <div>密码</div>
              <el-input v-model="loginF.password" clearable placeholder="请输入您的密码" show-password
                        style="height: 50px;margin-top: 5px;"
                        type="password"/>
            </el-form-item>
          </div>
          <div v-show="inf == -1" regr>
            <el-form-item prop="username">
              <div r>账号</div>
              <el-input v-model="regrF.username" clearable placeholder="请输入您的账号"
                        style="height: 50px;margin-top: 5px;"/>
            </el-form-item>
            <el-form-item prop="password">
              <div>密码</div>
              <el-input v-model="regrF.password" clearable placeholder="请输入您的密码" show-password
                        style="height: 50px;margin-top: 5px;"
                        type="password"/>
            </el-form-item>
            <el-form-item prop="confirmPassword">
              <div>确认密码</div>
              <el-input v-model="regrF.confirmPassword" clearable placeholder="请再次输入您的密码" show-password
                        style="height: 50px;margin-top: 5px;"
                        type="password"/>
            </el-form-item>
            <el-form-item prop="nickname">
              <div>姓名</div>
              <el-input v-model="regrF.nickname" clearable placeholder="请输入您的姓名"
                        style="height: 50px;margin-top: 5px;"/>
            </el-form-item>
            <el-form-item prop="email">
              <div>绑定邮箱</div>
              <el-input v-model="regrF.email" clearable placeholder="请输入您的邮箱号"
                        style="height: 50px;margin-top: 5px;"/>
            </el-form-item>
          </div>
          <div v-show="inf == 1" fgt>
            <el-form-item prop="username">
              <div r>账号</div>
              <el-input v-model="fgtF.username" clearable placeholder="请输入您的账号"
                        style="height: 50px;margin-top: 5px;"/>
            </el-form-item>
            <el-form-item prop="password">
              <div>密码</div>
              <el-input v-model="fgtF.password" clearable placeholder="请输入您的密码" show-password
                        style="height: 50px;margin-top: 5px;"
                        type="password"/>
            </el-form-item>
            <el-form-item prop="confirmPassword">
              <div>确认密码</div>
              <el-input v-model="fgtF.confirmPassword" clearable placeholder="请再次输入您的密码" show-password
                        style="height: 50px;margin-top: 5px;"
                        type="password"/>
            </el-form-item>
            <el-form-item prop="code">
              <div>邮箱验证码</div>
              <el-input v-model="fgtF.code" clearable placeholder="请输入您的验证码"
                        style="height: 50px;margin-top: 5px;">
                <template #append>
                  <div style="cursor: pointer;" @click="getVa">
                    {{ vaCount == 60 || vaCount == 0 ? '发送验证码' : vaCount + '秒' }}
                  </div>
                </template>
              </el-input>
            </el-form-item>
          </div>
        </el-form>
        <div bom @click="submit">{{ inf == 0 ? '立即登录' : (inf == -1 ? '立即注册' : '确定') }}</div>
        <img alt="" src="/login-line.svg" style="width: 100%;"/>
        <div bom bor @click="chy(true)">{{
            inf == 0 || inf == 1 ? '快速注册' : '立即登录'
          }}
        </div>
        <div bom bor @click="chy(false)">{{
            inf == 0 || inf == -1 ? '忘记密码' : '立即登录'
          }}
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
[container] {
  display: flex;

  [left-bg] {
    height: 100vh;
    zoom: 1;
    background-color: #fff;
  }

  [right] {
    margin: auto;

    [d-f] {
      position: relative;
      margin: 0 80px;
      width: 400px;
      padding: 20px 40px 10px 40px;
      border: 2px solid #e3e3e3;
      border-radius: 15px;

      [tp] {
        text-align: center;
      }

      [d-fr] {
        color: #666666;

        [r] {
          margin-top: 20px;
        }
      }

      [bom] {
        margin: 20px 0;
        background-color: #d96083;
        color: #ffffff;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border-radius: 10px;
        cursor: pointer;
      }

      [bor] {
        background-color: #ffffff;
        color: #111111;
        margin: 10px 0;
        border: 2px solid #dcdcdc;
      }
    }
  }
}
</style>